<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // then方式是一个异步方法，且是一个异步的微任务；
      /*
        任务：同步 和异步
        同步会先执行
        异步：会排队执行
        */

      /*
        同步和异步
        同步代码 会执行
        异步：
            1.微任务：为里提高js的响应精度，缩小js执行的颗粒度
            // 微任务队列可以被插队
             [1] [2] [3] [4] [5] [6]   ---->微任务队列
                         | [7]    
                //  promise.then() ,MutationObserve : 监听节点的变化的。

             2.宏任务  ：普通js任务都是宏任务；
                // 宏任务需要排队执行，不能插队
                [1] [2] [3] [4] [5] [6]   ---->微任务队列
                         |              [7]
                // 事件执行 资源加载 ajax 定时器 ....主线程 (整体的script)

        微任务和宏任务的执行顺序
        // 系统内部先执行宏任务 然后再执行微任务
        // 每个宏任务执行完毕会进入微任务检查点，检查该宏任务下的微任务队列，如果为空就继续执行下一个空任务，如果不为空就执行完毕微任务队列
            【宏1[微任务1,微任务2..]】--> 【宏2[微任务1,微任务2..]】---> 【宏3[微任务1,微任务2..]】---> 【宏4[微任务1,微任务2..]】---> 【宏5[微任务1,微任务2..]】
            
            // 宏任务里有一个任务是 script 主线程任务 （会执行所有的同步代码）;
            // 广义上说 同步代码也是异步代码

            【srcipt里的同步代码：1,2,4 [微任务队列：then微任务-3]】 ----》【settimeout宏任务执行-5[空]】;
        */
      //   setTimeout(() => {
      //     // 宏
      //     new Promise((resolve) => {
      //       resolve();
      //     }).then(() => {
      //       // 微
      //       console.log("test");
      //     });

      //     console.log(4);
      //   });

      //   new Promise((resolve) => {
      //     resolve();
      //     console.log(1);
      //   }).then(() => {
      //     // 微
      //     console.log(3);
      //     Promise.resolve()
      //       .then(() => {
      //         // 微
      //         console.log("before timeout");
      //       })
      //       .then(() => {
      //         // 微
      //         Promise.resolve().then(() => {
      //           // 微
      //           console.log("also before timeout");
      //         });
      //       });
      //   });
      //   console.log(2);
      // 1 ，2，3 ，before timeout ， also before timeout，4 ，test
      // new和console.log先执行，then在介入，后setTimeout异步

      //   const promise = new Promise((resolve, reject) => {
      //     console.log(1);

      //     setTimeout(() => {
      //       console.log("timerStart");
      //       resolve("success");
      //       console.log("timerEnd");
      //     }, 0);

      //     console.log(2);
      //   });

      //   promise.then((res) => {
      //     console.log(res);
      //   });
      //   console.log(4);

      // 1，2，4，timerStart，，timerEnd，success
      //   先new和console.log,再setTimeout，然后出来then

      //   console.log("1");

      //   setTimeout(function () {
      //     console.log("2");
      //     process.nextTick(function () {
      //       console.log("3");
      //     });

      //     new Promise(function (resolve) {
      //       console.log("4");
      //       resolve();
      //     }).then(function () {
      //       console.log("5");
      //     });
      //   });
      //   //  process.nextTick 微任务
      //第三题提示：process.nextTick是微任务，，，并且只能在js文件中运行

      //   process.nextTick(function () {
      //     console.log("6");
      //   });
      //   //
      //   new Promise(function (resolve) {
      //     console.log("7");
      //     resolve();
      //   }).then(function () {
      //     console.log("8");
      //   });
      //   //
      //   setTimeout(function () {
      //     console.log("9");
      //     process.nextTick(function () {
      //       console.log("10");
      //     });

      //     new Promise(function (resolve) {
      //       console.log("11");
      //       resolve();
      //     }).then(function () {
      //       console.log("12");
      //     });
      //   });

      //   1,7，6，8， 2,4，3,5   ,9,11,10，12
    </script>
  </body>
</html>
